<template>
  <div>
      <div class="logo">
          <h1>Vuejs</h1>
          <span>您正在登录Vuejs商城</span>
      </div>
      <div class="body">
          <input type="text" placeholder="用户名或电子邮箱" class="txt" v-model="user">
          <input type="password" placeholder="密码" class="txt" v-model="pwd">
          <input type="button" value="登录" class="btn" @click="login">
          <p><span  @click="a">忘记密码</span></p>
      </div>
      <div class="add"><span @click="register">或者，注册账号</span></div>
      
  </div>
</template>

<script>
    export default {
        data(){
            return {
                user: '',//用户名
                pwd: '',//密码
            }
        },
        methods: {
            a() { //点击忘记密码
                console.log('ok')
            },
            register(){
                //注册账号
                this.$router.push('Register')
            },
            login(){
                //点击登录
                //判断是否为空
                if(this.user&&this.pwd){ //通过$http.post提交参数进行登录验证
                    
                }else{
                    console.log('请补充完整')
                }
                
            }
        },
        created(){

        }
    }
</script>

<style scoped lang="scss">
   div {
       width: 1000px;
       height: 670px;
       background-color: rgb(15, 38, 82);
       position: fixed;
        .add {
          width: 100%;
          height: 60px;
          text-align: center;
          bottom: 60px;
          span {
              color: #fff;
              font-size: 16px;
          }
      }
       .logo {
           width: 100%;
           height: 160px;
           text-align: center;
           background-color: rgb(3, 5, 17);
           z-index: 99;
           padding-top: 60px;
           h1 {
               font-weight: 700;
               color: purple
           }
           span {
               position: absolute;
               left: 50%;
               transform: translateX(-50%);
               bottom: 0;
               color: rgb(56, 68, 90)
           }
       }
      .body {
          width: 100%;
          margin-top: 160px;
          padding: 0;
          height: 300px;
          .txt {
              background-color: rgb(56, 68, 90);
              height: 50px;
              padding: 0;
              margin: 0;
              text-indent: 1em
          }
          .btn {
              width: 200px;
              margin-top: 14px;
              background-color: rgb(96, 137, 219);
              color: #fff;
              border: 0;
              outline: none;
              height: 40px;
              left: 50%;
              transform: translateX(-50%)
          }
          p {
              color: #fff;
              font-size: 12px;
              text-align: center;
              margin-top: 20px
          }
      }
     
   }
</style>




